<template>
    <div class="register">
        <div class="icon">
            <i class="el-icon-s-comment"></i>
        </div>
        <div class="title">
           注册账号
       </div>
       <div class="email-warp">
           <el-input
            placeholder="请输入您的邮箱"
            v-model="email"
            clearable>
            </el-input>
       </div>
       <div class="btn" @click="sendReg" ref="regBtn">
           注册账号
       </div>
    </div>
</template>
<script lang="ts">
import {Vue, Component} from 'vue-property-decorator'
import axios from 'axios'

@Component
export default class Register extends Vue{

    $message: any
    $notify: any

    // 注册账号
    public email: string = ''

    mounted() {
     // 防止用户刷新重置注册时间 
     let regExpire: string|number = localStorage.getItem('regExpire') as string
        if(regExpire != null){
            regExpire = parseInt(regExpire)
            const curTime = new Date().getTime()
            if(regExpire > curTime){
                this.forbigRegisterBtn(Math.floor((regExpire - curTime)/1000) + 1)
            }else{
                localStorage.removeItem('regExpire')
            }
        }
    }

    // 禁用发送验证码按钮
    private forbigRegisterBtn(t:number){
        let time:number = t
        const btn = this.$refs.regBtn as HTMLElement
        btn.classList.add('forbid')
        btn.innerText = `注册账号(${time})`
        const timer = setInterval(()=>{
            time -= 1
            btn.innerText = `注册账号(${time})`
            if(time <= 0){
                btn.classList.remove('forbid')
                btn.innerText = "注册账号"
                clearInterval(timer)
            }
        },1000)
    }


    // 发送注册信息
    public sendReg(){
        if(this.email.match( /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/g) == null){
            this.$message.error("邮箱格式不正确")
            return
        }
        const expire = new Date().getTime() + 60 * 1000
        localStorage.setItem("regExpire", String(expire))
        this.forbigRegisterBtn(60)
        axios.post("/api/v1/user/send_reg/" + this.email)
            .then(res=>{
                if(res.data.code === 200){
                    this.$notify.success('已将邮件发送至您的邮箱，请注意查收')
                }else{
                    this.$notify.error(res.data.msg)
                }
            }).catch(err=>{
                this.$message.error("发送失败:" + err)
            })
    }
    
}
</script>

<style lang="less">
@import '../css/index.less';
.register{
    .float-win(#fdfdfd);
    .icon{
        display: flex;
        justify-content: center;
        align-content: center;
        font-size: 60px;
        color: @theme-color;
    }
    .title{
        text-align: center;
        height: 60px;
        line-height: 60px;
        font-size: 20px;
        color: @theme-color;
    }
    .btn{
        background-color: @theme-color;
        color: white;
        padding: 5px 0;
        text-align: center;
        margin: 15px 0;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.5s;
        &:hover{
            background-color: white;
            color: @theme-color;
            border: 1px solid @theme-color;
        }
    }
}
</style>